<template>
  <div>
    <!-- 
      父传子语法：
        1. 父组件通过给子组件，添加标签属性传值
        2. 子组件内部，通过 props 接收

      子传父语法：
        1. 子组件中 this.$emit('自定义事件名', 参数)
        2. 父组件中 注册对应的事件监听，处理触发的事件
           <Son @自定义事件名="处理函数"></Son>
     -->
    我是父组件
    <!-- <Sonvue
    v-for="item in message" 
    :key="item.id" 
    :SonNames="item"
    ></Sonvue> -->
    <Sonvue
      v-for="item in message"
      :key="item.id"
      :messageId="item.id"
      :messageUname="item.uname"
      :messageFamliyName="item.famliyName"
      :messageAge="item.age"
      :messageProfess="item.profess"
      @adds="add"
    ></Sonvue>
  </div>
</template>

<script>
import Sonvue from './SonName.vue'
export default {
  name: 'father',
  components: {
    Sonvue,
  },
  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端',
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试',
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈',
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯',
        },
      ],
    }
  },
  methods: {
    add(id) {
        // 对数组做循环，点击的id和循环的id要一致就会执行短路运算符后面的代码给年龄加1
      this.message.forEach((item) => item.id === id && (item.age += 1))
    },
  },
}
</script>

<style scoped></style>
